<template>
  <modal ref="modal_2"
         :title="title"
         :isCloseConfirm="false"
         top="5%"
         width="50%"
         height="50%"
         :close-on-click-modal="false"
         @modalOpened="opened"
         @modalClose="close">
    <basic-container>
      <avue-crud :option="option"
                 :table-loading="loading"
                 :data="data"
                 v-model:page="page"
                 v-model:search = "search"
                 :permission="permissionList"
                 v-model="form"
                 ref="crud"
                 @sort-change="sortChange"
                 @search-change="searchChange"
                 @search-reset="searchReset"
                 @selection-change="selectionChange"
                 @row-dblclick="dblclick"
                 @size-change="sizeChange"
                 @refresh-change="refreshChange"
                 @on-load="onLoad">
      </avue-crud>
    </basic-container>
    <template #footerButton>
      <!--<el-button type="primary" icon="el-icon-plus"  @click="handleSubmit">确定</el-button>-->
      <el-button icon="el-icon-circle-close" @click="$refs.modal_2.handleClose()">关闭</el-button>
    </template>
  </modal>
</template>

<script>
import {getList, getDetail, add, update, remove} from "@/api/anwise/material/customer_group";
import {mapGetters} from "vuex";

export default {

  data() {
    return {
      emits: ["success"],
      title:"选择品牌",
      form: {},
      query: {},
      loading: true,
      dateFormat: 'YYYY-MM-DD',
      pickerOptions: {},
      page: {
        pageSize: 20,
        currentPage: 1,
        total: 0
      },
      search:{},
      selectionList: [],
      arrayList:[],
      activeDate:'',
      option: {
        tip: false,
        searchShow: true,
        searchMenuSpan: 6,
        searchSpan:8,
        border: true,
        index: true,
        selection: false,
        labelWidth: 150,
        menuWidth: 120,
        menu:false,
        indexWidth:100,
        addBtn: false,
        editBtn: false,
        viewBtn: false,
        delBtn: false,
        stripe: true,
        searchIndex: 3,
        searchIcon: false,
        searchEnter:true,
        column: [
          {
            label: "品牌",
            prop: "programName",
            type: "input",
            search: true,
            overHidden: true,
            sortable: true,
            rules: [{
              required: true,
              message: "请输入品牌",
              trigger: "blur"
            }],
          },
          {
            label: "品牌分组",
            prop: "programGroup",
            type: "select",
            dicUrl: "/blade-system/dict-biz/dictionary?code=program_group",
            filterable: true,
            search: true,
            overHidden: true,
            sortable: true,
            props: {
              label: 'dictValue',
              value: 'dictValue',
            },
            dataType: 'string',
            rules: [{
              required: false,
              message: "请选择品牌分组",
              trigger: "blur"
            }],
          },
          {
            label: "币别",
            prop: "rmb",
            type: "select",
            filterable: true,
            overHidden: true,
            sortable: true,
            width:120,
            dicUrl: '/api/blade-system/dict-biz/dictionary?code=rmb',
            props: {
              label: 'dictValue',
              value: 'dictKey',
            },
            dataType: 'string',
          },
        ]
      },
      data: []
    };
  },
  computed: {
    ...mapGetters(["permission"]),
    permissionList() {
      return {
        addBtn: this.validData(this.permission.purchase_main_add, false),
        viewBtn: this.validData(this.permission.purchase_main_view, false),
        delBtn: this.validData(this.permission.purchase_main_delete, false),
        editBtn: this.validData(this.permission.purchase_main_edit, false)
      };
    },
    ids() {
      let ids = [];
      this.selectionList.forEach(ele => {
        ids.push(ele.id);
      });
      return ids.join(",");
    }
  },
  created() {
  },
  methods: {
    selectionLoad() {
      let arr = [];
      // console.log(this.selectionList);
      // if (this.selectionList && this.selectionList != null
      //     && this.selectionList.length > 0) {
      //     this.data.forEach(row => {
      //         if(this.selectionList.some((val) => val.id=== row.id)) {
      //             console.log("row.id1+"+row.id)
      //             arr.push(row);
      //         }
      //     })
      // } else {
      console.log(this.data,this.arrayList);
      if (this.arrayList) {
        this.data.forEach(row => {
          if(this.arrayList.some((val) => val.id=== row.id)) {
            console.log("row.id2+"+row.id)
            arr.push(row);
          }
        })

      }
      // }
      this.$nextTick(() => {
        arr.forEach(item => {
          // this.$refs.crud.clearSelection();
          console.log("check"+item.id)
          this.$refs.crud.toggleRowSelection(item, true);
        })
      })
    },
    showSelect() {
      this.$refs.modal_2.show();
      // this.onLoad(this.page);
    },
    clearData() {
      this.data = [];
      this.page.currentPage = 1;
    },
    clearSelection() {
      this.selectionList = [];
      this.arrayList = [];
      this.$refs.crud.toggleSelection();
    },
    searchReset() {
      this.query = {};
      this.onLoad(this.page);
    },
    searchChange(params, done) {
      this.query = params;
      this.page.currentPage = 1
      this.onLoad(this.page, params);
      done();
    },
    /** 双击选中*/
    dblclick(row) {
      this.$emit("success",row);
      this.$refs.modal_2.hide()
    },
    /**
     * 提交成功之后
     */
    submitAfter() {
      this.$refs.modal_2.hide()
    },
    handleSubmit() {
      console.log("setBankList")
      console.log(this.selectionList)
      this.$refs.modal_2.hide();
      this.$emit("setBankList",this.selectionList);

      // if (this.isAdd) {
      //   this.$refs.modal_2.handleClose()
      //   // this.$emit("success", this.selectionList);
      // } else if (this.isListAdd) {
      //
      //   // this.$emit("success", this.versionId, this.selectionList);
      // }
    },
    sortChange(val) {
      console.log(val)
      this.sort = {
        prop: val.prop,
        order: val.order
      };
      let order = "";
      if (this.sort.prop && this.sort.order) {
        if (this.sort.order === "descending") {
          order = `${this.sort.prop} desc`
        } else {
          order = `${this.sort.prop} asc`
        }
      }
      this.query.orderBy = order;
      this.onLoad(this.page);
    },





    opened() {
      //  this.onLoad(this.page);
    },
    close() {
      this.clearData();
      this.clearSelection();
    },


    selectionChange(list) {
      this.selectionList = list;
    },
    selectionClear() {
      this.selectionList = [];
      this.$refs.crud.toggleSelection();
    },

    sizeChange(pageSize){
      this.page.pageSize = pageSize;
    },
    refreshChange() {
      this.onLoad(this.page, this.query);
    },
    onLoad(page, params = {}) {
      this.loading = true;
      // params.isBomList = 1;
      // params.workListRemark = this.workList;
      getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
        const data = res.data.data;
        this.page.total = data.total;
        this.data = data.records;
        this.loading = false;
        // this.selectionLoad();
        this.selectionClear();
      });
    },
    handleDatePickerChange(value) {
      console.log(this.search);
    },
  }
};
</script>

<style>
::v-deep .el-table__row {
  height: 30px !important;
}
::v-deep  .el-table__cell{
  padding:  5px !important;
}

</style>
